<template>
    <div class="angle-box" :style="{flexDirection:props.flex?'row':'column'}">
        <slot></slot>
        <i class="angle left-top"></i>
        <i class="angle right-top"></i>
        <i class="angle left-bottom"></i>
        <i class="angle right-bottom"></i>
    </div>
</template>

<script setup>
    const props=defineProps({
        flex: {
            type: Boolean,
            default: () => false
        }
    })

</script>

<style scoped lang="less">
    .angle-box {

        border-radius: 0.08rem;
        border: 1px solid #21409a;
       // background: rgba(28, 38, 50, 0.5);
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        padding: .1rem;

        .angle {
            display: block;
            position: absolute;
            z-index: 10;
            width: 0.31rem;
            height: 0.27rem;
            background: center no-repeat;
            background-size: 100%;
            pointer-events: none;

            @horizontal: -0.08rem;
            @vertical: -0.07rem;

            &.left-top {
                background-image: url("./images/ico31-lt.png");
                left: @horizontal;
                top: @vertical;
            }

            &.right-top {
                background-image: url("./images/ico31-rt.png");
                right: @horizontal;
                top: @vertical;
            }

            &.left-bottom {
                background-image: url("./images/ico31-lb.png");
                left: @horizontal;
                bottom: @vertical;
            }

            &.right-bottom {
                background-image: url("./images/ico31-rb.png");
                right: @horizontal;
                bottom: @vertical;
            }
        }
    }
</style>